import React, { Component } from 'react';
import _ from 'lodash';
import { observer, inject } from "mobx-react";
import styles from './index.module.less';
import ProcessContent from './processContent';
import ChatContent from './chatContent';
import CloseBar from '../../components/CloseBar';
import SideContainer from '../common/sideRender/sideContainer';
import BannerTips from '../../components/BannerTips';
import IF from '../../components/If';

// 使用groupname正则判断律师组和委托人组
function getName(name) {
	if (!name) return '';
	else if (name.match('律师')) return '【律协】';
	else if (name.match('委托人')) return '【委协】';
	else return ''
}
@inject(({ chatState, commonState, userState }) => ({ chatState, commonState, userState }))
@observer
class ChatDetail extends Component {

	render() {
		const { commonState, chatState, userState, bannerTips } = this.props;
		const { chatId, chatContent, chatListCurrentItem, chatDraftCache, setChatDraftCache } = chatState;
		const projecttype = _.get(chatListCurrentItem, 'group.projecttype');

		// if(chatListCurrentItem) {
		//   console.log(JSON.parse(JSON.stringify(chatListCurrentItem)));
		// }

		return (
			<div className={styles.wrapDetail}>
				<div className={styles.detail}>
					<div className={styles.detailHeader}>
						<h3>
							{
								chatListCurrentItem ? (
									chatListCurrentItem.projectid ?
										`${getName(chatListCurrentItem.group.groupname)} ${chatListCurrentItem.stagename}-${chatListCurrentItem.projectname}` :
										chatListCurrentItem.group.groupname
								) : null
							}
						</h3>
						{commonState.sideOpen ? null : <CloseBar />}
					</div>
					<BannerTips
						show={!!bannerTips}
						autoplay={!!(bannerTips && bannerTips.tips)}
						type={bannerTips && bannerTips.type}
						message={bannerTips && bannerTips.message}
						tips={bannerTips && bannerTips.tips}
					/>
					<IF condition={chatId}>
						<div className={styles.detailContent}>
							{(projecttype === 1 || projecttype === 2) ? <ProcessContent /> : null}
							<div className={styles.chatContent}>
								<ChatContent
									key={chatId}
									userInfo={userState.info}
									chatId={chatId}
									data={chatContent[chatId]}
									chatDraftCache={chatDraftCache}
									setChatDraftCache={setChatDraftCache}
									chatListCurrentItem={chatListCurrentItem}
								/>
							</div>
						</div>
					</IF>
				</div>
				<SideContainer
					key={chatId}
					showContent={!!chatId}
					type={1}
					sideOpen={commonState.sideOpen}
					activeChange={chatListCurrentItem && chatListCurrentItem.projectid ? false : true}
					commonState={commonState}
				/>
			</div>
		);
	}
}

export default ChatDetail